<template>
  <div class="yanshou">
    <div class="Header">
      <h3>建德市投资项目全流程智能管理系统</h3>
      <div class="Header-right">
        <div class="imageOne">
          <img src="../assets/shouyeImage/管理.png" alt="" />
        </div>
        <div class="ImageTwo">
          <img src="../assets/shouyeImage/头像.png" alt="" />
          <p>admin</p>
          <img src="../assets/shouyeImage/展开icon.png" alt="" />
        </div>
      </div>
    </div>
    <div class="Section">
      <div class="NavBar">
        <TabBar msg="/yanshou"></TabBar>
      </div>
      <div class="Section-right" style="border-radius:10px">
        <div class="top1" style="width:98%;position: relative;margin-left:1%;">
          <div class="top" style="z-index:100">
            <mt-navbar v-model="selected" style="display:flex;position: relative;">
              <div class="t" style="color: #F0F8FA;">
                <mt-tab-item id="1" style="width:120px;text-align: center;line-height:50px">项目政府变更</mt-tab-item>
                <mt-tab-item id="2" style="width:120px;text-align: center;line-height:50px">工程结算审核</mt-tab-item>
              </div>
             
              <el-button type="primary" icon="el-icon-search" style="border-radius:76px">导出报表</el-button>
              <el-input
                placeholder="请输入内容"
                style="width:190px; line-height: 50px;position: absolute;right: 7%;"
                v-model="input4"
                prefix-icon="el-icon-search"
                >
              </el-input>
            </mt-navbar>
          </div>
        </div>
        <div class="a">
           <mt-tab-container v-model="selected">
                 <mt-tab-container-item id="1">
                   <!-- <div> -->
                      <el-table
                        :data="tableData1"
                        style="width: 100%">
                        <el-table-column
                          prop="name1"
                          label="项目名称"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="year"
                          label="项目年度"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="time"
                          label="项目期限">
                        </el-table-column>
                        <el-table-column
                          prop="type"
                          label="项目类别"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="address"
                          label="建设地址">
                        </el-table-column>
                        <el-table-column
                          prop="dw"
                          label="实施单位">
                        </el-table-column>
                        <el-table-column
                          prop="state"
                          label="状态">
                          <template style="display:flex">
                            <el-button type="danger" size="mini" class="x">审核中</el-button>
                            <el-button type="primary" size="mini" class="x">通过</el-button>
                            <el-button type="info" size="mini" class="x">未通过</el-button>
                          </template>
                        </el-table-column>
                      </el-table>
                      <div class="footer">
                      <el-pagination
                        background
                        layout="prev, pager, next,jumper"
                        :total="100"
                        style="text-align:center"
                        >
                        
                      </el-pagination>
                    </div>
                  <!-- </div> -->
                 </mt-tab-container-item>
                 <mt-tab-container-item id="2">
                    <!-- <div> -->
                    <el-table
                      :data="tableData"
                      style="width: 100%">
                      <el-table-column
                        prop="name"
                        label="项目名称"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="year"
                        label="项目年度"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="time"
                        label="项目期限">
                      </el-table-column>
                      <el-table-column
                        prop="type"
                        label="项目类别"
                        >
                      </el-table-column>
                      <el-table-column
                        prop="address"
                        label="建设地址">
                      </el-table-column>
                      <el-table-column
                        prop="dw"
                        label="实施单位">
                      </el-table-column>
                      <el-table-column
                        prop="state"
                        label="状态">
                        <template style="display:flex">
                          <el-button type="danger" size="mini" class="x">审核中</el-button>
                          <el-button type="primary" size="mini" class="x">通过</el-button>
                          <el-button type="info" size="mini" class="x">未通过</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  <!-- </div> -->
                  <div class="footer">
                    <el-pagination
                      background
                      layout="prev, pager, next,jumper"
                      :total="100"
                      style="text-align:center"
                      >
                      
                    </el-pagination>
                  </div>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import TabBar from "../components/TabBar";
import { Navbar, TabItem } from "mint-ui";

Vue.component(Navbar.name, Navbar);
Vue.component(TabItem.name, TabItem);
export default {
  name: "Yanshou",
  components: {
    TabBar,
  },
  data() {
    return {
      selected: "1",
      input4:'',
       tableData: [{
            name: '建德市xxx',
            year: '2019.2.8',
            time: '测试',
            type:'实施类',
            address:'建德市',
            dw:'建德市',
            state:''
          }, ],
        tableData1: [{
            name1: '建德市xxx',
            year: '2019.2.8',
            time: '测试',
            type:'实施类',
            address:'建德市',
            dw:'建德市',
            state:''
        }, ]
    };
  },
};
</script>
<style lang="less" scoped>
.yanshou {
  width: 100%;
  height: 100%;
    background-image: url("../assets/shouyeImage/bj.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  box-sizing: border-box;
  padding: 0 15px 50px 15px;
  
  
  .Header {
    width: 100%;
    height: 10%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    h3 {
      color: white;
    }
    .Header-right {
      display: flex;
      align-items: center;
      .imageOne {
        width: 35px;
        height: 35px;
        background-color: rgb(92, 169, 211);
        border-radius: 3px;
        display: flex;
        align-items: center;
        justify-content: center;
        img {
          width: 25px;
          height: 20px;
        }
      }
      .ImageTwo {
        display: flex;
        align-items: center;
        justify-items: center;
        margin-left: 5px;
        p {
          font-size: 12px;
          margin: 0 5px 0px 5px;
          color: white;
        }
        img:nth-child(1) {
          width: 20px;
          height: 20px;
        }
      }
    }
  }
  .Section {
    width: 100%;
    height: 90%;
    // background-color: tomato;
    display: flex;
    justify-content: space-between;
    .NavBar {
      width: 8.5%;
      height: 90%;
      box-sizing: border-box;
      padding-top: 5px;
    }
    .Section-right {
      width: 91.5%;
      height: 100%;
      background-color: #FCF7F7;
      box-sizing: border-box;
      padding: 5px;
      
      }
    }
  }

.top{
  height:50px;
  top: 0;
  background-color: #94C9D8;
  text-align: center;
  border-radius: 10px 10px 0px 0;
}
a.mint-tab-item{
  width: 30%;
}
/deep/.mint-navbar .mint-tab-item.is-selected{
  background-color: rgb(205, 133, 17) !important;
  color: #F7FBFC;
  height: 50px;
}
.el-button--primary{
    width: 120px;
    height: 40px;
    margin-top: 5px;
    margin-left: 22px;
}
.a{
  height: 93%;
  width: 98%;
  margin-left: 1%;
}
/deep/.el-table th {
  text-align: center;
  background-color: #FFFFFF !important;
}
/deep/.el-table td, .el-table th{
  text-align: center;
}
.el-table .cell{
  display: flex;
  height: 20px;
  text-align: center;
  display: flex;
}
/deep/.el-table td, .el-table th.is-leaf{
  border-bottom: 1px dashed #7B7B7B !important;
  
}
/deep/.x{
    width: 50px;
    height: 23px;
    font-size: 5px;
    line-height: 1px;
    padding-left: 4%;
}
/deep/.el-input--prefix .el-input__inner{
  border-radius: 50px;
  width:252px;
}
.t{
  display: flex;
  margin-left: 1%;
}
.footer{
  height: 50px;
  margin-top: 30%;
}
</style>
